<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>记忆漂流瓶</title>

    <link href="{$DIR}static/fontawesome/css/all.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="http://yiban.hbu.cn/lib/sbadmin/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="http://yiban.hbu.cn/lib/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
    <style>
        @font-face {
            font-family: "iconfont";
            /* Project id 2830227 */
            src: url('//at.alicdn.com/t/font_2830227_of3ehqtyt2o.woff2?t=1632385651335') format('woff2'), url('//at.alicdn.com/t/font_2830227_of3ehqtyt2o.woff?t=1632385651335') format('woff'), url('//at.alicdn.com/t/font_2830227_of3ehqtyt2o.ttf?t=1632385651335') format('truetype');
        }
        
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 18px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .icon-pingzi:before {
            content: "\e652";
        }
        
        .icon-yuwang:before {
            content: "\e614";
        }
        
        html {
            height: 100%;
        }
        
        .topbar {
            height: 50px;
            padding-left: 2px;
        }
        
        #content {
            background: url("{$DIR}static/background.jpg");
            background-repeat: repeat-y;
            background-size: 100%;
        }
    </style>
</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">

        <!-- Sidebar -->
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">


                    <!-- Topbar Navbar -->
                    <ul class="navbar-nav ml-auto">
                        回忆向之记忆漂流瓶测试版1.0
                </nav>

                <!-- Begin Page Content -->

                <div class="container-fluid" id="maindiv" style="min-height: 660px; ">
                    <!-- 排行榜 -->
                    <div class="main" style="flex:1;">
                        <div class="card shadow " style="background-color:rgba(132, 198, 236, 0.7);">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold text-primary " id="groupTitle"></h6>
                            </div>
                            <div class="card-body" style="padding:0px">
                                <table class="table table-bordered:0;" style="margin:0px" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>赞数排名</th>
                                            <th>赞数</th>
                                            <th>扔瓶人</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tablelist"> </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- 丢瓶和捞瓶 -->
                    <div style="position:relative;top:350px;margin-left: 6%;">
                        <div class="row">
                            <div class="col-5">
                                <button type="button" data-toggle="modal" data-target="#throw" class="btn btn-success">扔个&nbsp<i class="iconfont icon-pingzi"></i>&nbsp~</button>
                            </div>
                            <div class='col-2'></div>
                            <div class="col-5">
                                <button type="button" data-toggle="modal" data-target="#salvage" class="btn btn-success" id="getbottle">打捞<i class="iconfont icon-yuwang"></i> ~</button>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->



            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; yiban.hbu.cn 2021</span>
                    </div>
                </div>
            </footer>
            <!-- End of Footer -->

        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <div class="modal fade" id="throw" tabindex="-1" role="dialog" aria-labelledby="throw" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">发射我的漂流瓶~</h5>
                    <button type="button" class="close" id="closebutton" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form style="width: 70%; margin-left: 10%;padding-bottom: 10%;">
                        <div class="form-group">
                            <label for="type" class="col-form-label">漂流瓶类型:<br /><small id="typeIntroduce"
                                    style="color: #70a1ff;">不知道哪个幸运的小伙伴会收到</small></label>
                            <select class=" form-control form-select" id="type">
                                <option value="1">漂流瓶</option>
                                <option value="0">隐身瓶</option>
                            </select>
                        </div>
                        <div id="t1">
                            <div class="form-group">
                                <label for="anonymous" class="col-form-label">是否匿名</label>
                                <select class=" form-control form-select" id="anonymous">
                                    <option value="0">不匿名</option>
                                    <option value="1">匿名</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="contentType1">致陌生人:</br>
                                </label>
                                <textarea class="form-control" id="contentType1" rows="5"></textarea>
                            </div>
                            <div class="form-group" id="nameDiv">
                                <label for="name">From：</br>
                                </label>
                                <input class="form-control" placeholder="姓名or昵称" id="name" rows="5"></input>
                            </div>
                        </div>
                        <div id="t2" style="display: none;">
                            <div class="form-group">
                                <label for="contentType2">想说啥就说啥叭</br>
                                </label>
                                <textarea class="form-control" id="contentType2" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="throwBottle">Biu····</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>

                <hr />
            </div>
        </div>
    </div>
    <div class="modal fade" id="salvage" tabindex="-1" role="dialog" aria-labelledby="throw" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">瓶子捞上来啦~</h5>
                    <button type="button" class="close" id="closebutton" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card-body" style="list-style-type: none;">
                        <p id='bottleauthor'></p>
                        <p id='bottlecontent'></p>
                        <hr />
                        <a class="btn btn-info btn-icon-split" onclick="praise()" style="margin-bottom:14px;float:left;margin-left: 42%;">
                            <span class="text">点赞</span>
                        </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin-bottom:14px;float: right">丢回海里</button>
                    </div>
                </div>

                <hr />
            </div>
        </div>
    </div>
    <!-- Bootstrap core JavaScript-->
    <script src="http://yiban.hbu.cn/lib/sbadmin/vendor/jquery/jquery.min.js"></script>
    <script src="http://yiban.hbu.cn/lib/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js"></script>
    <script src="http://yiban.hbu.cn/lib/sbadmin/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Core plugin JavaScript-->
    <script src="http://yiban.hbu.cn/lib/sbadmin/vendor/jquery-easing/jquery.easing.min.js"></script>
    <!-- Custom scripts for all pages-->
    <script src="http://yiban.hbu.cn/lib/sbadmin/js/sb-admin-2.min.js"></script>
    <script src="http://yiban.hbu.cn/js/qrcode.js"></script>
    <script>
        $(function() {
            $.ajax({
                url: '{$DIR}' + "/index.php/index/index/getRank",
                type: "GET",
                dataType: "json",
                success: function(result) {
                    data = JSON.parse(result);
                    $('#tablelist').html(' ');
                    if (data.length > 6) {
                        len = 6;
                    } else {
                        len = data.length;
                    }
                    for (var i = 0; i < len; i++) {
                        var k = i + 1;
                        $('#tablelist').append('<tr><td>' + k + '</td><td>' + data[i]['praisenum'] + '</td><td>' + data[i]['name'] + '</td></tr>');
                    }
                    //alert(data[0]['id']);
                },
                error: function(ex) {
                    console.log(ex)
                }
            })
        })

        $('#getbottle').click(function() {
            $.ajax({
                url: '{$DIR}' + "/index.php/index/index/getBottleInfo",
                type: "GET",
                dataType: "json",
                success: function(result) {
                    //$('#closebutton').click();
                    data = JSON.parse(result);
                    //alert(data['content']);
                    $('#bottleauthor').html('来自' + data['name'] + '的瓶子：')
                    $('#bottlecontent').html(data['content']);
                },
                error: function(ex) {
                    console.log(ex)
                }
            })
        })

        function praise() {
            $.ajax({
                url: '{$DIR}' + "/index.php/index/index/praise",
                type: "POST",
                dataType: 'json',
                success: function(result) {

                    // alert(result);
                    if (result == 0) {
                        alert('这个瓶子今天你已经点赞过了，请明天再来吧！');
                    } else {
                        alert('点赞成功！');
                    }
                },
                error: function(ex) {
                    console.log(ex)
                }
            })
        }

        $('#type').change(function() {
            var type = $('#type').val();
            if (type == 1) {
                $('#t1').css('display', 'block');
                $('#t2').css('display', 'none');
                $('#typeIntroduce').html('不知道哪个幸运的小伙伴会收到');
            } else if (type == 0) {
                $('#t1').css('display', 'none');
                $('#t2').css('display', 'block');
                $('#typeIntroduce').html('会被加密保护起来，不会被别人捡到哟');
            }
        })
        $('#anonymous').change(function() {
            var nm = $('#anonymous').val();
            if (nm == 0) {
                $('#nameDiv').css('display', 'block');
            } else {
                $('#nameDiv').css('display', 'none');
            }
        })

        function submitForm() {
            $.ajax({
                url: '{$DIR}' + "/index.php/index/index/throwBottle",
                data: {
                    'type': $('#type').val(),
                    'anonymous': $('#anonymous').val(),
                    'contentType1': $('#contentType1').val(),
                    'contentType2': $('#contentType2').val(),
                    'name': $('#name').val(),
                },
                type: "POST",
                success: function(result) {
                    $('#closebutton').click();
                },
                error: function(ex) {
                    console.log(ex)
                }
            })
        }
        $('#throwBottle').click(function() {
            if ($('#type').val() == 1) {
                $.ajax({
                    url: '{$DIR}' + "/index.php/index/index/judgeQualification",
                    type: "GET",
                    success: function(result) {
                        if (result == 0) {
                            alert('漂流瓶每天仅可投出一个哟！');
                        } else {
                            submitForm();
                        }
                    },
                    error: function(ex) {
                        console.log(ex)
                    }
                })
            } else {
                submitForm();
            }
        })
    </script>
</body>

</html>